<template>
	<div :class="['za-split', !!back ? 'back' : '']">
		<span><slot></slot></span>
	</div>
</template>
<script>
	export default {
		props: {
			back: {
				default: true
			}
		}
	}
</script>
<style lang="scss">
	$back: #F3FAF8;
	.za-split {
		margin: 20px 0;
		position: relative;
		text-align: center;
		&.back {
			background: $back;
			span {
				background: $back;
			}
		}
		&:before {
			content: '';
			position: absolute;
			height: 1px;
			width: 260px;
			left: 50%;
			margin-left: -130px;
			z-index: 1;
			top: 50%;
			background: #e7e7e7;
		}
		span {
			display: inline-block;
			position: relative;
			z-index: 2;
			
			line-height: 40px;
			width: 120px;
			font-size: 14px;
			color: #5C5C5C;
			text-align: center;
		}
	}
</style>

